<template>
	<view class="signOut">
		<view class="title">
			<view>拍照签到</view>
			<view>{{signOutTime.substring(0,signOutTime.length-3)}}</view>
		</view>
		<view class="content">
			<view class="content-title">
				<div>
					<div class="left"></div>
					<div class="right">
						<span>共用体请拍摄电梯使用证</span>
						<span>私用电梯请拍摄电梯明天</span>
					</div>
				</div>
			</view>
			<view class="">
				<imageDragSort :parentStyle="parentStyle" :list="lists" 
				 @changeList="changeImg" :max="1"></imageDragSort>
			</view>
			<view class="location">
				<image src="/static/images/maintain/location.png" mode=""></image>
				<text>{{msg.buildingName}}</text>
			</view>
		</view>
		<view class="bottom">
			<view @click="handleCancle">取消</view>
			<view @click="handleSingout">签退</view>
		</view>
	</view>
</template>

<script>
import imageDragSort from '@/components/image-drag-sort/index.vue';
import {formatTime} from '@/utils/utils.js';
import {
	getDistance
} from '@/utils/tools.js'; // 经纬度距离计算 
export default {
	props:{
		msg:{
			type:Object
		},
		signOutTime:{
			type:String
		}
	},
	components: {
		imageDragSort
	},
	data() {
		return {
			parentStyle:0,
			signImage:''
		};
	},
	created() {
			
	},
	computed: {
		
		methods: {
		 
		   changeImg(val) {
				// console.log(val,'获取图片的值')
			  this.signImage = val[0];
			},
			handleCancle(val) {
				this.$emit('cancle');
			},
			async handleSingout() {
				console.log();
			 let res = await this.getLocalInfo();
			
			 if (!res.latitude) {
			 	uni.showModal({
			 		title: '提示',
			 		content: '地理位置获取失败,请检查是否打开GPS或已授权',
			 		showCancel: false
			 	});
			 	return;
			 }
			 let distance = getDistance(res.latitude, res.longitude, this.msg.latitude, this.msg.longitude);
			 if (distance > this.$config.maxDistance) {
			 	uni.showToast({
			 		title: `请在保养地点${this.$config.maxDistance}米范围内点击到达`,
			 		icon: 'none'
			 	});
			 	return;
			 }
			 // return false
				// console.log(this.signImage,222)
				if (this.signImage === '') {
					uni.showToast({
						title:'请先上传图片',
						icon:'none'
					});
				} else {
					this.$emit('comfire',{signImage:this.signImage});
				}
			}
	
		},
	}
};
</script>

<style lang="scss" scoped>
.signOut {
	width: 506rpx;
	// height: 466rpx;
	background-color: #fff;
	border-radius: 16rpx;
	display: flex;
	flex-direction: column;
	.title {
		padding: 22rpx 28rpx;
		display: flex;
		background-color: #0091ff;
		color: #fff;
		justify-content: space-between;
		view:nth-child(1) {
			font-size: 32rpx;
		}
		view:nth-child(2) {
			// width: 88rpx;
			height: 40rpx;
			background: #ffffff;
			border-radius: 20rpx;
			color: #0091ff;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 16rpx;
		}
	}
	.content{
		// height: 300rpx;
		padding: 34rpx 0;
		display: flex;
		flex: 1;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		view{
			flex: 1;
		}
		.content-title{
			color: #333;
			margin-bottom: 20rpx;
		}
		.location{
			margin-top: 32rpx;
			height: 40rpx;
			display: flex;
			color: #999;
			font-size: 24rpx;
			align-items: center;
			image{
				width: 28rpx;
				height: 28rpx;
			}
			text{
				margin-left: 14rpx;
			}
		}
	}
	.bottom{
		height: 73rpx;
		border-top: 2rpx solid #f5f5f5;
		color: 300;
		display: flex;
		view{
			display:flex;
			flex:1;
			align-items: center;
			justify-content: center;
		}
		view:nth-child(2){
			color: #0091ff;
			border-left: 2rpx solid #f5f5f5;
		}
	}
}
</style>
